<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <style type="text/css">
        .list {
            height: 100px;
            text-overflow-y: hidden;
            overflow: hidden;
            width: 300px;
            border: 1px solid #000;
            padding:0 5px;
        }
        .active{background:#b00;color:#fff;}
    </style>
</head>
<body>
<div id="list">
    <div>生活,　一半是回忆,　一半是继续~~</div>
    <div>对自己苛刻，疲##惫....从来不想责怪别人，只想做好自己，也从来都是我的不对。</div>
    <div>前进、前进、再前进！哈哈</div>
    <div>人生如戏~！何必在意...</div>
    <div>找份开心的工作过早上8点到晚上18点，找个喜欢的女人过晚上18点到早上8点。这就是生活</div>
    <div>宁可高傲的发霉，也不低调的凑合。我们，那被逼出来的成熟~</div>
</div>
<script type="text/javascript">
    var $ = $ || window;
    $.get = function (expr) {
        function clsMatcher(className){
            return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
        }
        var e = typeof expr == "string" ? document.getElementById(expr) : expr;
        var elem = {
            dom:e,
            addClass:function(className) {
                var oldCls = e.className;
                e.className = !oldCls ?
                        className :
                        clsMatcher(className).test(oldCls) ?
                                oldCls : [oldCls,className].join(" ");
                return this;
            },remove:function() {
                e.parentNode && e.parentNode.removeChild(e);
                return this;
            },removeClass:function(className){
                e.className =(e.className||"").replace(clsMatcher(className),"$1$2");
                return this;
            },on:function(type, callback) {
                if (window.attachEvent)
                    e.attachEvent("on" + type, callback);
                else
                    e.addEventListener(type, callback, false);
                return this;
            },first:function(type) {
                var children = e.childNodes;
                for (var k = 0; k < children.length; k++) {
                    if (children[k].nodeType == 3)
                        continue;
                    if (!type || children[k].tagName.toLowerCase() == type.toLowerCase())
                        return $.get(children[k]);
                }
            },appendTo:function(parent){
                var p=parent.dom||parent;
                p.appendChild(e);
                return this;
            }
        };
        var directions = ["Left","Top"];
        for (var i = 0; i < directions.length; i++) {
            var method = "scroll" + directions[i];
            elem[method] = function(val) {
                return arguments.length ? e[method] = val : e[method];
            };
        }
        var sides = ["Width","Height"];
        for (var i = 0; i < sides.length; i++) {
            var side = sides[i];
            elem[side.toLowerCase()] = function(val) {
                if (arguments.length) {
                    e.style[side.toLowerCase()] = val + "px";
                    return this;
                }
                return  e["offset" + side] || e[side];
            }
        }
        return elem;
    };
    function Timer(c) {
        var thread;
        var delay = c.delay || 100;
        var runner = c.run || typeof c == "function" ? c : function() {
        };
        this.start = function() {
            !thread && (thread = window.setInterval(runner, delay));
            return this;
        }
        this.stop = function() {
            var snapshot = thread;
            thread = null;
            snapshot && window.clearInterval(snapshot);
            return this;
        }

    }
    var list = $.get("list").addClass("list");
    var increment = 5;
    var timer = new Timer(function() {
        var offset = list.scrollTop();
        var first = list.first().addClass('active');
        if (offset >= first.height()) {
            list.first().removeClass('active').remove().appendTo(list);
            list.scrollTop(increment);
        } else {
            list.scrollTop(Math.min(offset + increment,first.height()));
        }
    });
    timer.start();
    list.on("mouseover", timer.stop).on("mouseout", timer.start);
</script>
</body>
</html>